layui实现文件或图片上传记录

您所在的位置:网站首页 layui 文档 layui实现文件或图片上传记录

layui实现文件或图片上传记录

2022-05-28 23:52| 来源: 网络整理| 查看: 265

layui实现文件或图片上传记录 时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:次

本文为大家分享了获得实现文件或图片上传记录的具体代码,供大家参考,具体内容如下

首先是获得自己的官网关于图片/文件上传的帮助文档:

接下来是我自己的使用记录:

1.首先在射流研究…中定义一个全局变量

var uploadListIns2。进行赋值

//多文件列表示例/** * 图片上传*/layui.use('upload ',function(){ var $=layui.jquery,upload=layui . uploadvar Demolistview=$(' # proImageList ');上传列表=上传。渲染({ elem : ' #选择文件',//选择文件的按钮url: '上传!ftp.action ',//后台处理文件长传的方法data:{'serviceName': '外协订单供应商上传检验报告,' tableName ' : ' T _ OUTSOURCE _ ORDER ',' fileType': '图片},accept: 'file ',multiple: true,//是否允许多文件上传acceptMime: 'image/*,//规定打开文件选择框时,筛选出的文件类型field:'upload ',auto: false,bindAction: '#upload ',//用来触发上传的按钮身份选择:函数{ //选择文件后的回调函数,本例中在此将选择的文件进行展示var文件=这个。文件=obj。push file();//将每次选择的文件追加到文件队列//读取本地文件obj.preview(函数(索引、文件、结果){ var tr=$(['tr id='upload-' index ' ',' TD '文件。name/' TD ',' td' (file.size/1014)).toFixed(1) 'kb/td ',' td等待上传/td ',' td ',' button class=' layui-BTN layui-BTN-xs演示-重装layui-隐藏'重传/button ',' button class=' layui-BTN layui-BTN-xs layui-BTN-危险演示-删除'删除/button ','/td ','/tr'].联接(" ");//单个重传tr.find(' .演示-重装').on('click '),function(){ obj.upload(索引,文件);});//删除tr.find(' .演示-删除')。on('click ',function(){ delete files[index];//删除对应的文件tr。移除();上传列表。配置。艾伦。next()[0].值=' ';//清空输入文件值,以免删除后出现同名文件不可选});demolistview。追加(tr);});},done:函数(资源、索引、上传){ //多文件上传时,只要有一个文件上传成功后就会触发这个回调函数控制台。信息;if(res.status=='success'){ //上传成功var tr=脱模视图。find(' tr # upload-' index),TDS=tr。儿童();tds.eq(2).html(' span style=' color : # 5FB 878;'上传成功/span’);tds.eq(3).html(' a href=' RES . URL ' ' rel='外部无跟随'查看/a ');//清空操作返回删除这个。文件[索引];//删除文件队列已经上传成功的文件} else { alert(RES . message);} this.error(索引,上传);},allDone:函数{ //当文件全部被提交后,才触发如果。总计。成功){ layer。“msg(”有文件上传失败,暂不更新生产进度,请重试或联系管理员');}else { //更新生产进度更新生产计划(当前计划,当前计划);} },错误:函数(索引,上传){ var tr=demostview。find(' tr # upload-' index),TDS=tr。儿童();tds.eq(2).html(' span style=' color : # FF5722;'上传失败/span’);tds.eq(3).查找('。演示-重装').移除CLaSS(' layui-hide ');//显示重传} });$('.layui-上传-文件')。hide();});上述射流研究…代码中出现的相关超文本标记语言元素如下,相关引入射流研究…文件和钢性铸铁为:bootstrap3的射流研究…和钢性铸铁及获得的射流研究…文件即可

!-模态框(Modal)-div class=' Modal fade ' id='上传Modal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel ' aria-hidden=' true ' div class=' Modal-dialog ' div class=' Modal-content ' div class=' Modal-header '按钮类型=' button ' class=' close ' data-misse=' Modal ' aria-hidden=' true '/button H4 class=' Modal-title ' id=' myModalLabel '上传检验报告/h4 /div div class='modal-body '按钮类型=button ' class=' BTN BTN-primary ' id='选择文件'选择多文件/button button type=' button ' class=' BTN BTN-成功' id='上传'开始上传/button div class=' table-responsive ' table class=' table table-hover ' th文件名/th大小/th状态/th操作/th/tr/ad t正文id=' proImageList '/t正文/表/div/div class='modal-footer '按钮类型='button' class='btn btn-default '数据-消除='模态'关闭/button /div /div! - /.模态-内容- /div!- /.model-/div 3 .在打开模态框时可以对一中定义的变量进行动态赋值,这些变量会相应的传到后台中:

函数showuploadmodel(id){//动态赋值上传列表。配置。数据。tablerecordid=id上传列表。配置。数据。文件名前缀=id ' .自检"通过。";$(' # uploadmodel ').情态(“显示”);}4.最终前端实现效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:layui实现文件或图片上传记录是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。

上一篇:Angular2次级路由的详细说明 下一篇:jQuery实现的简单手风琴效果示例


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3